<template>
	<div class="wraper-invite-list" :class="{iphoneX:isIphoneX,iphone:isIphone,seeDetail:seeDetail && pageState==1,isAndroid:isAndroid}">
		<div class="line"></div>
		<div class="nav-bar">
			<div class="arrow" @click="goBack"></div>
		</div>
		<div class="tab">
			<!-- 好友管理 -->
			<span :class="{on:pageState==1}" @click="changeState(1)">{{$t('inviteList-key1')}}</span>
			<!-- 子代理管理 -->
			<span v-if="user===0" :class="{on:pageState==2}" @click="changeState(2)">{{$t('inviteList-key2')}}</span>
		</div>
		<div class="search" v-if="seeDetail && pageState==1">
			<input type="text" v-model="keyWords" :placeholder="$t('inviteList-key11')">
			<span class="close" @click="keyWords='';" v-if="keyWords"></span>
		</div>
		<div class="nav2 nav3" v-if="pageState==1" style="padding-right:0">
			<!-- uid -->
			<div style="width:17%;">uid</div>
			<!-- 好友管理 -->
			<div style="width:25%;">{{$t('inviteList-key8')}}</div>
			<!-- 使用情况 -->
			<div style="width:34%">{{$t('inviteList-key9')}}</div>
			<!-- 注册时间 -->
			<div style="width: 14%; padding-right: 4%; float: right; text-align: right;">{{$t('inviteList-key10')}}</div>
		</div>
		<div class="nav2" v-if="pageState==2">
			<!-- 下线管理 -->
			<div class="left">uid</div>
			<div class="right">
				<div class="scroll" :style="{left:-distance+'px'}" :class="{zh:locale==='zh',en:locale==='en',ja:locale==='ja'}">
					<!-- uid -->
					<div style="width:2.5rem;">{{$t('inviteList-key3')}}</div>
					<!-- 历史返佣 -->
					<div>{{$t('inviteList-key4')}}</div>
					<!-- 今日返佣 -->
					<div>{{$t('inviteList-key5')}}</div>
					<!-- 历史邀请 -->
					<div>{{$t('inviteList-key6')}}</div>
					<!-- 今日交易人数 -->
					<div>{{$t('inviteList-key7')}}</div>
				</div>
			</div>
		</div>
		<div class="content" :class="{noList:list.length===0}">
			<div class="list">
				<van-list
					v-model="loading"
	  				:finished="finished"
	  				:error.sync="loadError"
	  				:offset="offset"
	  				:error-text="$t('reloadText')"
	  				:finished-text="$t('finishedText')"
	  				:loading-text="$t('loading')"
	  				@load="load"
				>
					<div class="ele" style="padding:0;" v-for="item of list" :key="item.uid" v-if="pageState==1" @click="jump(item.phone || item.email,item.uid)">
						<div style="width:17%;">{{item.uid}}</div>
						<div style="width:24%;" :class="{on:item.is_super_partner=='1'}">{{item.phone || item.email}}</div>
						<div style="width:36%;" :class="{en:locale === 'en'}">
							<!-- 无 -->
							<span class="wu" v-if="!item.is_order && !item.is_guess && !item.is_difference && !item.is_coin && !item.is_currency">-</span>
							<!-- 充 -->
							<span v-if="item.is_order" class="chong">{{$t('invite-key50')}}</span>
							<!-- 猜 -->
							<span v-if="item.is_guess" class="cai">{{$t('invite-key51')}}</span>
							<!-- 差 -->
							<span v-if="item.is_difference" class="cha">{{$t('invite-key52')}}</span>
							<!-- 币 -->
							<span v-if="item.is_coin" class="bi">{{$t('invite-key53')}}</span>
							<!-- 现 -->
							<span v-if="item.is_currency" class="xian">{{$t('invite-key54')}}</span>
						</div>
						<div :class="{lock:locale !='zh'}">{{item.showTime}}</div>
					</div>
					<div class="con" v-if="pageState==2">
						<div class="content2">
							<div class="slide-left">
								<div class="left one-line" v-for="item of list" :key="item.uid" :class="{on:item.is_super_partner=='1'}">{{item.uid}}</div>
							</div>
							<div class="slide-right" ref="scroll">
								<div class="scroll" :class="{zh:locale==='zh',en:locale==='en',ja:locale==='ja'}">
									<div class="item" style="margin-left:0;padding-left:0;padding-right:0;"  v-for="item of list" :key="item.uid">
										<div class="right">
											<div style="width:2.5rem;">{{item.phone || item.email || item.account}}</div>
											<div>{{item.rebate_total}}</div>
											<div>{{item.rebate_day}}</div>
											<div>{{item.friends_num}}</div>
											<div>{{item.trade_person_day}}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
		    		<div class="empty" v-if="list.length===0 && finished">
		    			<p class="img"><img src="../../static/images/empty.png"></p>
		    			<!-- 暂无记录 -->
		    			<p class="desc">{{$t('noData')}}</p>
		    		</div>
				</van-list>
			</div>
		</div>
	</div>
</template>
<script src="./inviteList.js"></script>
<style scoped lang="scss">
	@import './inviteList.scss';
</style>
<style>
	.content.noList .van-list__finished-text{
		display: none;
	}
</style>